<template>
  <view class="avatar_box">
    <view>
      <!--  -->
      <view @click.stop="toPersonCenter()">
        <u-avatar :src="imgUrl || '/static/avatar.png'"></u-avatar>
      </view>
    </view>
    <view class="right_box">
      <view class="top">
        <slot name="top"></slot>
      </view>
      <view class="bottom flex_start">
        <slot name="bottom"></slot>
        <span
          style="margin-left: 10rpx; color: #576b95"
          v-if="
            (UserInfo.id == userId &&
              !$curPage().route.includes('circle/circleDetail') &&
              !this.commentUserInfo.userId) ||
            (UserInfo.id == userId &&
              prePageRoute.includes('circle/personCenter'))
          "
          @click.stop="delCircle"
          >删除</span
        >
      </view>
    </view>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin'
import { mapState } from 'vuex'

export default {
  mixins: [pageMixin],
  computed: {
    ...mapState('user', ['UserInfo']),
  },
  props: {
    imgUrl: {
      type: String,
      default: '',
    },
    userId: {},
    commentUserInfo: {
      //对象
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      prePageRoute: this.$prePage().route,
    }
  },
  created() {
    // console.log(' this.$prePage()', this.$prePage().route)
    // console.log(533333333, this.prePageRoute)
  },
  methods: {
    delCircle() {
      this.$emit('delCircle')
    },
    toPersonCenter() {
      if (this.commentUserInfo && this.commentUserInfo.userId) {
        if (this.commentUserInfo.fromUserType == 2) {
          this.toPage(`server/doctor?id=${this.commentUserInfo.userId}`)
        } else {
          this.toPage(
            `circle/personCenter?userId=${this.commentUserInfo.userId}`
          )
        }
      } else {
        this.toPage(`circle/personCenter?userId=${this.userId}`)
      }
      return
    },
  },
}
</script>

<style lang="scss">
.avatar_box {
  display: flex;
  justify-content: flex-start;
  .right_box {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .top {
      font-size: 28rpx;
      font-weight: 400;
      color: #121212;
      // line-height: 35rpx;
    }
    .bottom {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 30rpx;
    }
  }
}
.flex_start {
  justify-content: start;
  display: flex;
  align-items: center;
}
</style>
